<template>
  <div class="minting">
    <div class="btnAdd" v-if="activeName == 'assets' && !isAdd" @click="isAdd = true">
      + 新增
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="资产" name="assets">
        <div v-if="activeName == 'assets'">
          <div class="addBox" v-if="isAdd">
            <i @click="isAdd = false">资产</i>&nbsp;&nbsp;＞&nbsp;&nbsp;<span>新增</span>
          </div>
          <div v-if="isAdd" class="asstesBox">
            <MintingAdd @onEstimating="onEstimating" name="" />
          </div>
          <div v-if="!isAdd">
            <TableView :activeName="activeName" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="资产价值评估" name="estimating">
        <div v-if="activeName == 'estimating'">
          <div class="addBox" v-if="id">
            <i @click="id = ''">资产价值评估</i>&nbsp;&nbsp;＞&nbsp;&nbsp;<span>{{ id }}</span>
          </div>
          <div class="asstesBox">
            <MintingAdd v-if="id" @onEstimating="onEstimating" name="estimating" :zid=id />
          </div>
          <div v-if="!id">
            <TableView activeName="estimating" @onGetId="onGetId" />
          </div>
        </div>
        
      </el-tab-pane>
      <el-tab-pane label="资产审计" name="auditing">
        <div class="addBox" v-if="id">
          <i @click="id = ''">资产审计</i>&nbsp;&nbsp;＞&nbsp;&nbsp;<span>{{ id }}</span>
        </div>
        <div v-if="id" class="asstesBox">
          <MintingAdd @onEstimating="onEstimating" name="auditing" :zid=id />
        </div>
        <div v-if="activeName == 'auditing' && !id">
          <TableView activeName="auditing" @onGetId="onGetId" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="资产凭证(NFT)" name="nftConfirm">
        <div class="addBox" v-if="id">
          <i @click="id = ''">资产凭证(NFT)</i>&nbsp;&nbsp;＞&nbsp;&nbsp;<span>{{ id }}</span>
        </div>
        <div v-if="id" class="asstesBox">
          <MintingAdd @onEstimating="onEstimating" name="nftConfirm" :zid=id />
        </div>
        <div v-if="activeName == 'nftConfirm' && !id">
          <TableView activeName="nftConfirm" @onGetId="onGetId" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="AUSD铸币" name="ausdWaiting">
        <div class="addBox" v-if="id">
          <i @click="id = ''">AUSD铸币</i>&nbsp;&nbsp;＞&nbsp;&nbsp;<span>{{ id }}</span>
        </div>
        <div v-if="id" class="asstesBox">
          <MintingAdd @onEstimating="onEstimating" name="ausdWaiting" :zid=id :obj="obj" />
        </div>
        <div v-if="activeName == 'ausdWaiting' && !id">
          <TableAusdView activeName="ausdWaiting" @onGetId="onGetIds" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import TableView from './TableView.vue'
import TableAusdView from './TableAusdView.vue'
import MintingAdd from './MintingAdd.vue'

export default {
  data() {
    return {
      activeName: 'assets',
      isAdd:false,
      id:'',
      obj:null
    }
  },

  created() {
    // this.getdata(this.formInline)
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 提交后
    onEstimating(names){
      if(names == ''){
        this.activeName = 'estimating'
        this.isAdd = false
        this.id = ''
      }
      if(names == 'estimating'){
        this.activeName = 'auditing'
      }
      if(names == 'auditing'){
        this.activeName = 'nftConfirm'
      }

      if(names == 'nftConfirm'){
        this.activeName = 'ausdWaiting'
        // alert(this.id)
      }
      if(names == 'ausdWaiting'){
        this.id = ''
        this.activeName = 'ausdWaiting'
      }
      
    },
    onGetId(zid){
      // alert(name)
      this.id = zid
    },
    onGetIds(zid,obj){
      this.obj = obj
      this.id = zid
    }
    
  },

  watch:{
    activeName:{
      handler(newVal,oldVal){
        this.isAdd = false
        this.id = ''
      }
    }
  },

  // 注册组件
  components: {
    TableView,
    MintingAdd,
    TableAusdView
  },
}
</script>

<style scoped>
  .asstesBox{
    /* height: calc(100vh - 250px);
    overflow: auto; */
  }
  .addBox i{font-style: initial;cursor: pointer;}
  .addBox{
    font-size: 14px;
    color: #919191;
    margin-bottom: 30px;
    cursor: pointer;
  }
  .addBox span{color: #1C1E22;}
  .minting{
    position: relative;
    padding:0 20px;
  }
  .btnAdd{
    position: absolute;
    right: 20px;
    background: #1C1E22;
    border-radius:30px;
    color: #fff;
    padding: 4px 20px;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    z-index: 100;

  }
  .minting /deep/ .el-tabs__item{
    width:150px !important;
    text-align: center;
    color: #919191;
    height: 46px;
    font-weight: 500;
    font-size: 15px;
  }
  .minting /deep/ .el-tabs__header{
    margin-bottom: 30px;
  }
  .minting /deep/ .el-tabs__active-bar{
    background: #1C1E22 !important;
  }
  .minting /deep/ .el-tabs__item.is-active{
    color: #1C1E22;
    font-weight: bold;
  }
  .minting /deep/ .el-tabs__nav-wrap::after{
    height: 1px !important;
  }
  .minting /deep/ .el-tabs__active-bar{
    height: 3px;
    border-radius: 2px;
  }
  .asstesBox::-webkit-scrollbar {
    width: 6px;
  }
  .asstesBox::-webkit-scrollbar-track {
      background: rgb(235, 235, 235);
      border-radius: 10px;
  }
  .asstesBox::-webkit-scrollbar-thumb {
      background: rgb(206, 206, 206);
      border-radius: 10px;
  }
</style>

 
 